<template>
    <div class="px">
        <el-card style="width: 80%;margin: 0 auto;">
            <div slot="header" class="clearfix" v-show="!examId">
                <span>准考证信息</span>
                <el-button type="primary"
                           size="mini"
                           icon="el-icon-arrow-left"
                           @click="$router.go(-1)"
                           style="float: right;">返回
                </el-button>
            </div>
            <div>
                <div ref="printAdmissionTicket">
                    <div class="zkz-title">
                        <h2>{{examInfo.examName}}</h2>
                        <h2>考生准考证</h2>
                    </div>
                    <el-card>
                        <div class="zkz-body">
                            <table class="zkz-body-tb">
                                <tr>
                                    <td rowspan="6" id="zkz-tp">
                                        <div class="block">
                                            <img
                                                    style="display: block;padding: 0;margin: 0"
                                                    :src="registerInfo.head"
                                                    class="zjz"/>
                                        </div>
                                    </td>
                                    <th>考生姓名：</th>
                                    <td>{{registerInfo.trueName}}</td>
                                </tr>
                                <tr>
                                    <th>考生性别：</th>
                                    <td>
                                       <span v-for="item in gender"
                                             v-if="item.valueId===registerInfo.gender">
                                    {{item.valueName}}
                                        </span>
                                    </td>
                                </tr>


                                <tr>
                                    <th>身份证号：</th>
                                    <td>{{registerInfo.idCard}}</td>
                                </tr>

                                <tr>
                                    <th>准考证号：</th>
                                    <td>{{registerInfo.examCardNum}}</td>
                                </tr>
                                <tr>
                                    <th>考试地点：</th>
                                    <td>{{examInfo.examLocation}}</td>
                                </tr>
                            </table>

                            <table class="zkz-body-ap">
                                <tr>
                                    <th>考试编号</th>
                                    <th>考试名称</th>
                                    <th>考试时间</th>
                                    <th>考试地点</th>
                                    <th>座位号</th>
                                </tr>
                                <tr>
                                    <td>{{examInfo.id}}</td>
                                    <td>{{examInfo.examName}}</td>
                                    <td>{{examInfo.examBeginTime}} ~ {{examInfo.examOverTime}}</td>
                                    <td>{{examInfo.examLocation}}</td>
                                    <td>{{registerInfo.seatNum}}</td>
                                </tr>
                            </table>

                        </div>
                        <el-alert
                                :closable="false"
                                title="注意事项："
                                type="warning">
                            <p> 1、考试开始30分钟后，考试不得进入考场，请准时参加考试！</p>
                            <p> 2、考生必须带齐准考证、身份证参加考试，否则不得进入考场</p>
                            <p> 3、准考证考生可以自行打印，用A4纸打印即可</p>
                            <p> 4、考试过程中请严格遵守考场纪律，按照考场要求完成考试，考出水平、考出风格</p>
                        </el-alert>
                    </el-card>
                </div>
            </div>
            <div v-show="!examId">
                <el-divider/>
                <el-button type="primary"
                           size="mini"
                           icon="el-icon-printer"
                           @click="print"
                           style="float: right;">打印准考证
                </el-button>
                <div style="clear: both"></div>
            </div>
        </el-card>
    </div>
</template>

<script>
    import {getExaminationById, querySelfExamRegistration} from "../../../../api/examination";
    import {queryByTypeCode} from "../../../../api/dictionary";
    import {getApiPath, getupLoadPath} from "../../../../utils/common";

    export default {
        name: "index",
        props: ["examId"],
        data() {
            return {
                examInfo: {},
                registerInfo: {},
                gender: [],
            }
        },
        created() {
            this.initData()
        },
        methods: {
            print() {
                this.$print(this.$refs.printAdmissionTicket)
            },
            async initData() {
                let examId = this.$route.query.id
                if (!examId) {
                    examId = this.examId
                }
                let resp = await getExaminationById(examId)
                this.examInfo = resp.data
                resp = await querySelfExamRegistration(examId);
                this.registerInfo = resp.data
                let headImg = getupLoadPath() + this.registerInfo.head;
                this.registerInfo.head = headImg
                resp = await queryByTypeCode("gender");
                this.gender = resp.data
            }
        },

    }
</script>

<style scoped lang="scss">
    .zkz-title {
        margin: 0 0 15px;

        h2 {
            text-align: center;
            line-height: 40px;
            padding: 0;
            margin: 0;
        }

    }
    .zkz-body {
        .zkz-body-tb {
            margin: 15px 0;
            min-height: 150px;

            #zkz-tp {
                width: 120px;
            }

            th {
                color: #303133;
                font-size: 14px;
                text-align: right;
                width: 80px;
            }

            td:not(#zkz-tp) {
                padding: 0 5px;
            }

        }
    }

    .zkz-body-ap {
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 11px;
        width: 100%;
        margin: 15px 0;
        color: #787b80;

        th, td {
            text-align: center;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #787b80;
        }
    }
</style>